<template>
	<view class="content">
		<view class="top">
			<view class="left">
				<view class="title">{{name}}</view>
				<view class="over-time">完成时间：{{subTime}}</view>
				<view class="length">完成时长：{{duration}}分钟</view>
			</view>
			<view class="right cir-progress">
				<iCircle :percent="percent" :size="250" BgId="BgId" InId="InId" :trailColor="tcolor" :strokeColor="scolor">
					<icon v-if="percent == 100" type="success" size="60" color="#5cb85c" />
					<view v-else class="cir_progress_title">
						<view style="text-align: center;">
							<text class="cir_progress_score">{{percent}}</text>
							<text class="cir_progress_unit">%</text>
						</view>
						<view class="cir_progress_type">正确率</view>
					</view>
					<view slot="canvas">
						<canvas class="CanvasBox strokeCanvas" canvas-id="BgId"></canvas>
						<canvas class="CanvasBox trailCanvas" canvas-id="InId"></canvas>
					</view>
				</iCircle>
			</view>
		</view>
		<view class="hr"></view>
		<view class="work">
			<view class="work_title">
				<view class="title_art">{{situation}}</view>
				<view class="title_right">
					<text>正确</text>
					<view class="circle true_circle"></view>
				</view>
					<view class="title_bandui">
						<text>半对</text>
						<view class="circle bandui_circle"></view>
					</view>
				<view class="title_wrong">
					<text>错误</text>
					<view class="circle false_circle"></view>
				</view>
			</view>
			<view class="work_art" v-if="resultList">
				<view class="" v-for="(item, index) in resultList" :key="index">
					<view class="work_art_title">{{item.question_type_name}}</view>
					<view class="row">
						<view class="work_circle work_art_right" v-for="(item1, index1) in item.question" :key="index1">
							<view class="work_circle_text" :class="[item1.is_answer == 2 ? 'right_bg'  : item1.is_answer == 1 ? 'wrong_bg' : 'bandui_bg']">{{index1+1}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="footer_art" @click="wrong">
				<i class="iconfont iconcuotijiexi"></i>
				<view>错题解析</view>
			</view>
			<view class="footer_art" @click="all">
				<i class="iconfont iconquanbujiexi"></i>
				<view>全部解析</view>
			</view>
		</view>
	</view>
</template>

<script>
	import iCircle from '@/components/xiaoran-circle/xiaoran-circle'
	import util from '@/common/util.js'
	export default{
		data() {
			return {
				student_id: 0,
				class_log_id: '',
				accuracy: '',
				name: '',
				subTime: '',
				duration: '',
				resultList: [],
				is_exam_type: '',
				type: '',
				percent: 0,
				situation: '练习情况'
			}
		},
		onLoad(e) {
			this.student_id = uni.getStorageSync("currentChild").student_id
			this.class_log_id = e.class_log_id
			this.is_exam_type = e.is_exam_type
			this.type = e.type
			
			let title = ''
			var url = '';
			if(e.is_exam_type === '1'){
				switch (e.type){
					case '1':
						title = '练习报告'
						this.situation = '练习情况';
						break
					case '2':
						title = '作业报告'
						this.situation = '作业情况';
						break
					case '3':
						title = '作业报告'
						this.situation = '作业情况';
						break
					case '4':
						title = '预习报告'
						this.situation = '预习情况';
						break
				}
				url = 'user/Grade.Stuhomework/Homeworkreport';
			}else{
				title = '测验报告'
				this.situation = '测验情况';
				url = 'user/Grade.Stuexam/Examreport';
			}
			this.getList(url);

			uni.setNavigationBarTitle({
				title: title
			})
		},
		components:{
			iCircle
		},
		computed: {
			tcolor() {
				let color = '#AFEFE0';
				return color;
			},
			scolor() {
				let color = '#00D5A2';
				return color
			}
		},
		methods:{
			getList(url) {
				let data = {
					student_id: this.student_id,
					class_log_id: this.class_log_id
				}
				this.$zapi.apiPost(url, data).then(res => {
					let reportList = res.data.data
					console.log(typeof reportList.accuracy);
					this.accuracy = parseInt(reportList.accuracy);
					this.percent = parseInt(reportList.accuracy);
					this.name = reportList.name
					this.subTime = util.getFormatTime(reportList.update_time ? reportList.update_time : '')
					this.duration = reportList.duration
					let questionList = reportList.question
					let quesList = []
					for(let i = 0; i < questionList.length; i++) {
						if(questionList[i].question.length != 0) {
							quesList.push(questionList[i])
						}
					}
					this.resultList = quesList
				})
			},
			add() {
				if (this.percent >= 100) {
					return false;
				}
				this.percent += 10;
			},
			minus() {
				if (this.percent <= 0) {
					return false;
				}
				this.percent -= 10;
			},
			wrong() {
				uni.navigateTo({
					url: '../task/all?pagetype=error&class_log_id=' + this.class_log_id + '&is_exam_type=' + this.is_exam_type
				})
			},
			all() {
				uni.navigateTo({
					url: '../task/all?pagetype=correct&class_log_id=' + this.class_log_id + '&is_exam_type=' + this.is_exam_type
				})
			}
		}
	}
	
</script>

<style>
	.content{
		margin: 0 30upx;
		color: #333333;
		font-weight: Regular;
	}
	.hr{
		height: 20upx;
		background: #FAFAFA;
		margin: 0 -30upx;
	}
	.top{
		height: 256upx;
		display: flex;
	}
	.left{
		width: 65%;
	}
	.right{
		width: 35%;
		height: 226upx;
	}
	.CanvasBox {
		width: 226px;
		height: 226px;
		position: absolute;
		top: 0px;
		left: 0px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.cir_progress_title{
		height: auto;
	}
	.cir_progress_type{
		text-align: center;
		color: #999999;
		font-size: 20upx;
	}
	.cir_progress_score,
	.cir_progress_unit{
		font-size: 36upx;
		color: #00D5A2;
		line-height: 1;
	}
	.title{
		font-size: 36upx;
		margin-top: 36upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.over-time,
	.length{
		font-size: 28upx;
		margin-top: 12upx;
	}
	.work_title{
		margin-top: 30upx;
	}
	.work_title,
	.title_right,
	.title_bandui,
	.title_wrong{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.title_art{
		font-weight: Medium;
		font-size: 36upx;
		padding-left: 20upx;
		border-left: 4upx solid #00D5A2;
		line-height: 1;
	}
	.title_right{
		position: absolute;
		right: 264upx;
	}
	.title_bandui {
		position: absolute;
		right: 156upx;
	}
	.title_wrong{
		position: absolute;
		right: 48upx;
	}
	.circle{
		width: 20upx;
		height: 20upx;
		border-radius: 50%;
		margin-left: 8upx;
	}
	.true_circle{
		background: #00D5A2;
	}
	.bandui_circle{
		background: #FF9900;
	}
	.false_circle{
		background: #FF7171;
	}
	.work_art{padding-bottom: 120upx;}
	.work_art_title{
		color: #999999;
		font-size: 32upx;
		margin: 36upx 0;
	}
	.row{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.work_circle{
		width: 14.28%;
		margin-bottom: 30upx;
		height: 68upx;
	}
	.work_circle_text{
		width: 68upx;
		height: 68upx;
		border-radius: 50%;
		margin-right: 36upx;
		text-align: center;
		line-height: 68upx;
		color: #FFFFFF;
	}
	.right_bg{
		background: #00D5A2;
	}
	.bandui_bg {
		background: #FF9900;
	}
	.wrong_bg{
		background: #FF7171;
	}
	.footer{
		position: fixed;
		bottom: 0;
		height: 120upx;
		line-height: 120upx;
		width: 100%;
		margin-left: -30upx;
		border-top: 1px solid #E5E5E5;
		background: #fff;
	}
	.footer_art{
		/* display: inline-block;
		text-align: center; */
		width: 50%;
		height: 120upx;
		line-height: 120upx;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.iconcuotijiexi{
		color: #FF9900;
		font-size: 46upx !important;
		margin-right: 28upx;
	}
	.iconquanbujiexi{
		color: #00D5A2;
		font-size: 46upx !important;
		margin-right: 28upx;
	}
	.footer_art view{
		font-size: 30upx;
	}
</style>
